import React, { useState, useRef } from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  StyleSheet,
  Button,
} from 'react-native';
import ScrollableTabView from '@itenl/react-native-scrollable-tabview';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';

function HomeScreen() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>HomeAsdfasfd</Text>

      <Text style={styles.label}>计数器: {count}</Text>
      <TouchableOpacity style={styles.customButton} onPress={() => setCount(count + 1)}>
        <Text style={styles.buttonText}>+1</Text>
      </TouchableOpacity>
    </View>
  );
}

function ProfileScreen() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>我的页面</Text>

      <Text style={styles.label}>计数器: {count}</Text>
      <TouchableOpacity style={styles.customButton} onPress={() => setCount(count + 1)}>
        <Text style={styles.buttonText}>+1</Text>
      </TouchableOpacity>
    </View>
  );
}

export default function App() {
  const [enableCachePage, setEnableCachePage] = useState(false);
  return (
    <Tester>
      <TestSuite name="enableCachePage">
        <TestCase tags={['C_API']} itShould="enableCachePage">
          <Text style={styles.title}>enableCachePage: {String(enableCachePage)}</Text>
          <Button
            title="change enableCachePage"
            onPress={() => setEnableCachePage(!enableCachePage)}
          />
          <View style={{ width: '100%', height: 500 }}>
            <ScrollableTabView
              stacks={[
                { screen: HomeScreen, tabLabel: '首页' },
                { screen: ProfileScreen, tabLabel: '我的' },
              ]}
              enableCachePage={enableCachePage}
              firstIndex={0}
            />
          </View>
        </TestCase>
      </TestSuite>
    </Tester>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f8f8f8',
  },
  customButton: {
    backgroundColor: '#007BFF',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
    alignSelf: 'flex-start',
    width: 100,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    textAlign: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginVertical: 20,
  },
  label: {
    fontSize: 18,
    marginVertical: 10,
  },
  button: {
    backgroundColor: '#007BFF',
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
    marginVertical: 10,
  },
  btnText: {
    color: 'white',
    fontSize: 16,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginVertical: 10,
    borderRadius: 5,
    backgroundColor: 'white',
  },
  item: {
    padding: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
});